<template>
  <div class="app-select">
    <select
      v-model="localValue"
      class="inner"
      v-bind="$attrs"
    >
      <option
        v-for="(i, index) in options"
        :key="index"
        :value="i.value"
      >
        {{ i.label }}
      </option>
    </select>
    <UniconsAngleDown />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  options: { label: string; value: string | boolean }[]
  modelValue: any
}

interface Emits {
  (e: 'update:modelValue', value: any): void
}

const emit = defineEmits<Emits>()

const props = defineProps<Props>()

const localValue = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
})
</script>

<style lang="scss" scoped>
.app-select {
  position: relative;
  .inner {
    height: 32px;
    outline: none;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 var(--spacing-xs);
    -webkit-appearance: none;
    width: 300px;
    background-color: var(--color-select);
    color: var(--color-text);
  }
  :deep(svg) {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    fill: var(--color-text);
  }
}
</style>
